<template>
  <div id="tabBar">
    <div class="tab-bar-block">
      <div class="item home" :class="currentIndex == 1? 'active' : ''" @click="navTabBar(1)">
        <i></i>
        <span>社区</span>
      </div>
      <div class="item volumn" :class="currentIndex == 2? 'active' : ''" @click="navTabBar(2)">
        <i></i>
        <span>党支部</span>
      </div>
      <div class="item camera" :class="currentIndex == 3? 'active' : ''" @click="navTabBar(3)">
        <i></i>
        <span>社区胶卷</span>
      </div>
      <div class="item me" :class="currentIndex == 4? 'active' : ''" @click="navTabBar(4)">
        <i></i>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>
   
<script>
import { Dialog } from "mand-mobile";
export default {
  name: "tabBar",
  components: {
    [Dialog.name]: Dialog
  },
  props: ["currentIndex"],
  data() {
    return {};
  },
  methods: {
    navTabBar(index) {
      let _this = this;
      if (index != this.currentIndex) {
        switch (index) {
          case 1: {
            this.$router.push({
              path: "/index"
            });
            break;
          }
          case 2: {
            this.$router.push({
              path: "/party"
            });
            break;
          }
          case 3: {
            this.$router.push({
              path: "/community"
            });
            break;
          }
          case 4: {
            this.$router.push({
              path: "/my"
            });
            break;
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.tab-bar-block {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 998;
  border-top: 1px solid #f1f1f1;
  display: flex;
  background: #fff;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
    flex: 1;
    span {
      margin-top: 10px;
      font-size: 22px;
      color: #656565;
    }
    &.home {
      i {
        display: block;
        width: 48px;
        height: 48px;
        background: url("/static/images/common/home.png");
        background-size: 100%;
      }
      &.active {
        i {
          background: url("/static/images/common/home_active.png");
          background-size: 100%;
        }
        span {
          color: #bea062;
        }
      }
    }
    &.volumn {
      i {
        display: block;
        width: 48px;
        height: 48px;
        background: url("/static/images/common/volumn.png");
        background-size: 100%;
      }
      &.active {
        i {
          background: url("/static/images/common/volumn_active.png");
          background-size: 100%;
        }
        span {
          color: #bea062;
        }
      }
    }
    &.camera {
      i {
        display: block;
        width: 48px;
        height: 48px;
        background: url("/static/images/common/camera.png");
        background-size: 100%;
      }
      &.active {
        i {
          background: url("/static/images/common/camera_active.png");
          background-size: 100%;
        }
        span {
          color: #bea062;
        }
      }
    }
    &.me {
      i {
        display: block;
        width: 48px;
        height: 48px;
        background: url("/static/images/common/me.png");
        background-size: 100%;
      }
      &.active {
        i {
          background: url("/static/images/common/me_active.png");
          background-size: 100%;
        }
        span {
          color: #bea062;
        }
      }
    }
  }
}
</style>